import { ref } from 'vue';

export const dragActionBarHandle = () => {
    const menuRef = ref(null)
    const actionBarRef = ref(null)
    const isShowActionBar = ref(true)
    const actionBarLeft = ref(0);
    const actionBarTop = ref(0);
    const state = {
        left: null,
        top: null,
        width: null,
    }

    const clickMenu = () => {
        isShowActionBar.value = !isShowActionBar.value;
    }
    const mousedown = (event) => {
        const { offsetX, offsetY } = event;
        state.left = offsetX;
        state.top = offsetY;
        document.addEventListener("mousemove", mousemove)
        document.addEventListener("mouseup", mouseup)
    }
    const mousemove = (event) => {
        actionBarTop.value = event.clientY - state.top;
        actionBarLeft.value = event.clientX + state.left - state.width - 5;
    }
    const mouseup = () => {
        document.removeEventListener("mousemove", mousemove)
        document.removeEventListener("mouseup", mouseup)
    }

    return {
        menuRef,
        actionBarRef,
        isShowActionBar,
        actionBarLeft,
        actionBarTop,
        state,

        clickMenu,
        mousedown
    }
}